<template>
  <div>
    <el-button type="primary" :disabled="!category3Id" icon="el-icon-plus" @click="addSpuInfo">添加SPU</el-button>
    <el-table :data="spuList" border style="margin-top:10px">
      <el-table-column label="序号" type="index" align="center" width="80px" />
      <el-table-column label="SPU名称" prop="spuName" />
      <el-table-column label="SPU描述" prop="description" />
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-tooltip content="添加SKU" placement="top">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSkuInfo(row)" />
          </el-tooltip>
          <el-tooltip content="更新Spu" placement="top">
            <el-button type="warning" icon="el-icon-edit" size="mini" @click="editSpuInfo(row)" />
          </el-tooltip>
          <el-tooltip content="查看SKU" placement="top">
            <el-button type="info" icon="el-icon-info" size="mini" />
          </el-tooltip>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="您真的要删除此项SPU吗？" @onConfirm="deleteSpuInfo(row)">
            <el-tooltip slot="reference" content="删除SPU" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" />
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="currentPage" align="center" :page-sizes="[3,5,10,20]" :page-size="limit" layout=" prev, pager, next, jumper,->,total,sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { reqGetSpuList, reqDeleteSpu } from '@/api/product/spu'
export default {
  name: 'SpuList',
  data() {
    return {
      loading: false,
      currentPage: 1,
      total: 0,
      limit: 3,
      spuList: []
    }
  },
  computed: {
    ...mapState('category', ['category3Id']),
    ...mapMutations('spu', ['SET_SPU_ID'])
  },
  watch: {
    category3Id: {
      immediate: true,
      handler() {
        const { category3Id } = this
        if (!category3Id) {
          this.currentPage = 1
          this.spuList = []
          this.total = 0
          this.limit = 3
          return
        }
        this.getSpuList()
      }
    }
  },
  methods: {
    async getSpuList() {
      const { currentPage: page, limit, category3Id } = this
      this.loading = true
      const result = await reqGetSpuList({ page, limit, category3Id })
      if (result.code === 200) {
        this.spuList = result.data.records
        this.total = result.data.total
        this.loading = false
      }
    },
    handleSizeChange(val) {
      this.limit = val
      this.getSpuList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getSpuList()
    },
    // 编辑spu
    editSpuInfo(row) {
      this.$emit('update:visible', 3)
      this.$emit('setSpuInfo', {
        ...row,
        spuImageList: [],
        spuSaleAttrList: []
      })
    },
    // 添加数据
    addSpuInfo() {
      this.$emit('update:visible', 3)
      this.$emit('setSpuInfo', {
        spuImageList: [],
        spuSaleAttrList: []
      })
    },
    async ddeleteOneSpuInfo(row) {
      const result = await reqDeleteSpu(row.id)
      if (result.code === 200) {
        this.$message.success('删除spu成功')
        // 重新刷新页面
        this.getSpuList()
      } else {
        this.$message.error('删除spu失败')
      }
    },
    //  添加SKUInfo
    addSkuInfo(row) {
      this.$emit('update:visible', 3)

      // 将spuId spuName添加到Vuex中
      this.SET_SPU_ID(row)
    },
    // 删除一条数据
    async deleteSpuInfo(row) {
      const result = await reqDeleteSpu(row.id)
      if (result.code === 200) {
        this.$message.success('删除数据成功')
        this.getSpuList()
      } else {
        this.$message.error('删除数据失败')
      }
    }
  }
}
</script>
<style scoped>
</style>
